<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>详情页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait">
		<meta name="full-screen" content="true" />
		<meta name="x5-fullscreen" content="true" />
		<meta name="360-fullscreen" content="true" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/guide.min.css" />
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>		
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>       
		<script type="text/javascript" src="js/swiper.min.js" ></script>
		<script type="text/javascript" src="js/jquery.fly.min.js" ></script>
		

	</head>
	<style>
		body{
			background: #F5F5F5;	
			padding: 0 0 50px 0;		
		}
		.header{
			width: 100%;	
			height: 50px;		
			line-height: 50px;		
			text-align: center;
			border-bottom: 1px solid #ccc;	
			position: relative;
			background:#FBFBFB;
		}
		.header .backicon{
			position: absolute;
			height: 50px;
			width: 50px;
			text-align: center;
			left: 0px;
			top: 0px;
			
		}
		.header .backicon span{
			display: inline-block;
			width: 26px;
			height: 26px;
			background: url(img/back.png) center no-repeat;
			margin: 14px 0 0 14px;
			background-size: contain;
		}
		img{
			width: 100%;
		}
		.header h1{
			font-size: 20px;
		}
		.temp{
			width: 100%;
		}
		.temp .txt{
			margin-top: 3px;
		}
		.temp .bookinfo1{
			border: 1px solid #fff;
			background: #fff;
			margin-bottom: 10px;
			padding-bottom: 14px;
		}
		.temp .book{
			width: 90%;
			margin: 20px auto;
		}
		.temp .book .pic{
			width: 100px;
			height: 112px;
			margin-right: 10px;
		}
		.temp .book p:first-child{
			color: #f66d00;
			font-size: 18px;
			margin-bottom: 12px;
		}
		.temp p{
			overflow: hidden;
			font-size: 16px;
		}
		.temp .book .price{
			padding-top: 10px;
			color: #f66d00;
		}
		.temp .psmall{
			font-size: 14px;
			line-height: 24px;
			color: #666;
		}
		.temp .readInfo{
			width: 90%;
			margin: 30px auto 0 auto;
		}
		.temp .readInfo .startRead,.temp .readInfo .freeDownload{
			width: 120px;
			height: 40px;
			line-height: 40px;			
			text-align: center;			
			font-size: 18px;
			
		}
		.temp .readInfo .startRead{
			border: 1px solid #eee;
			background: #fff;
			color: #39C764;
			box-shadow: 0 8px 8px -7px #d2d1cd;
		}
		.temp .readInfo .freeDownload{
			color: #fff;
			background:linear-gradient(to top,#36BD7B,#47CE69) ;
			box-shadow: 0 6px 6px -5px #d2d1cd;
		}
		.bookinfo2{
			background: #fff;
			width: 100%;
			padding: 10px 0;
			font-size: 16px;
		}
		.tab{
			width: 100%;
		}
		.bookinfo2 .bootomline{
			border-bottom: 1px solid #ccc;
		}
		.bookinfo2 .demo{
			width: 90%;
			margin: 0 auto;
			position: relative;
		}
		.bookinfo2 .demo span{
			display: inline-block;
			width: 30%;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
		.tabcolor{
			color:#39C764 ;
		}
		.bottomLine{
			position: absolute;
			width:60px ;
			height: 2px;			
			background:#39C764;
			left: 10px;
			top: 39px;
			transition: all .2s;
		}
		.tab .tabcontent{
			width: 90%;
			margin: 10px auto;
		}
		.tab .content{			
			display: inline-block;
			line-height: 0.9rem;
			text-indent: 2em;
		}
		.tab .mulu p{
			line-height: 0.9rem;
			padding-left: 1em;
			border-bottom: 1px solid #eee;
		}
		.tab .comment{
			padding-bottom: 10px;
			border-bottom: 1px solid #ccc;
			margin-bottom: 10px;
		}
		.tab .commentPic{
			width: 40px;
			height: 40px;
			border-radius: 50%;
			margin-right: 10px;
		}
		.tab .commentPic img{
			border-radius: 50%;
			width: 100%;
			height: 100%;
			background-size: contain;
		}
		.tab .comment .txt{
			width: 85%;
			
		}
		.tab .comment .txt p{
			line-height: 0.9rem;
			
		}
		.tab .comment .txt p:nth-of-type(1){
			font-size: 14px;
			color: #666;
		}
		.carrousel{
			width: 100%;
			margin-top: 10px;
			background: #fff;			
		}
		.carrousel .carrouselTitle{
			padding-top: 10px;
			width: 90%;
			margin: 0 auto;
			font-size: 16px;
		}			
		a:focus{
			text-decoration: none;
		}
		.footer{
			width:100%;
			height: 50px;
			line-height: 50px;
			background: #fff;
			position: fixed;	
			left: 0;
			bottom: 0;		
			z-index: 99999999;
		}
		.cartshop{
			width: 36%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 16px;
			background: #f00;
		}
		.jiaru{
			background: #F4E5DA;
			position: absolute;
			right: 36%;
			bottom: 0;
			color: #f00;
		}
		.goumai{
			position: absolute;
			right: 0;
			bottom: 0;
			background: #FF923F;
			color: #fff;
		}
		.carticon{
			background: url(img/gouwuche2.png);
			width: 42px;
			height: 42px;
			position: fixed;
			bottom: 20%;
			left: 80%;
			background-size: contain;
			z-index: 10;
		}	 
		.d1{
			width: 40px;
			height: 40px;
			border-radius: 50%;
			position:fixed;
			left: 70%;
			z-index: 9999;
			
		}
		.d1 img{
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-size: contain;
		}	
	</style>
	<body>
		<div class="header">
			<h1>详情页</h1>
			<div class="backicon" onclick="javascript:history.back(-1);"><span></span></div>
		</div>
		<div class="temp" id="temp">
			<div class="bookinfo1">
				<div class="book clearfix">
					<div class="pic fl"><img src="img/pic1.jpg"/></div>
					<div class="txt fl">
						<p class="title">人间失格</p>
						<p class="psmall">作者:【日】太宰治</p>
						<p class="psmall">所属分类：外国小说</p>
						<p class="psmall">出版时间：2015-08-01</p>
						<p class="price">¥ 12.00</p>
					</div>				
				</div>
				<div class="readInfo clearfix">
					<div class="startRead fl" onclick="location.href = 'read.html';return false;">开始阅读</div>
					<div class="freeDownload fr">收藏</div>
				</div>				
			</div>
		</div>		
		<div class="bookinfo2">
			<div class="tab">
				<div class="bootomline">
					<div class="clearfix demo">
						<span class="fl tabcolor">简介</span>
						<span class="fl">目录</span>
						<span class="fl">评论</span>
						<div class="bottomLine"></div>
					</div>	
				</div>						
				<div class="tabcontent">
					<div class="content">人间失格，即丧失为人的资格。这是太宰治生平最后一部作品，也是他最重要的作品。全书由作者的序言、后记，以及主角大庭叶藏的三个手札组成，描写主角从青少年到中年，为了逃避现实而不断沉沦，经历自我放逐、酗酒、自杀、用药物麻痹自己，终于一步步走向自我毁灭的悲剧，在自我否定的过程中，抒发自己内心深处的苦闷，以及渴望被爱的情愫……</div>
					<div class="mulu">
						<p>译者序</p>
						<p>人间失格</p>
						<p>维庸之妻</p>
						<p>Good-bye</p>
						<p>灯笼</p>
						<p>满愿</p>
						<p>美男子与香烟</p>
						<p>皮肤与心</p>
						<p>蟋蟀</p>
						<p>樱桃</p>
					</div>
					<div class="comments">
						<div class="comment clearfix">
							<div class="commentPic fl"><img src="img/1.jpg" /></div>
							<div class="txt fl">
								<p>来自一个沉默的读者</p>
								<p>网上有句话很流行，生而为人，对不起！相传是出自人间失格，可是这本书我看了两遍还是没见到原话。万能的书友们你们又看到吗？</p>
							</div>
						</div>
						<div class="comment clearfix">
							<div class="commentPic fl"><img src="img/1.png" /></div>
							<div class="txt fl">
								<p>洛未兮</p>
								<p>对不起，看了一半还是觉得不能理解....到底是什么原因导致的主人公会有这样的生活态度呢？<p>
							</div>
						</div>
					</div>
				</div>	
			</div>											
		</div>
		<div class="carrousel">
			<div class="carrouselTitle">大家还在看</div>			
		</div>
		<div class="swiper-container swiper-container-horizontal swiper-container-wp8-horizontal">
			<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-884px, 0px, 0px);">
				<div class="swiper-slide">					
						<div class="booklist">
							<img src="img/img1.jpg" />
							<p>解忧杂货店</p>
							<p>(日)东野圭吾</p>
						</div>
					<div class="booklist">
						<img src="img/img2.jpg" />
						<p>浮生六记</p>
						<p>(清)沈复</p>
					</div>
					<div class="booklist" style="margin-right: 10px;">
						<img src="img/img3.jpg" />
						<p>月亮和六便士</p>
						<p>(英)毛姆</p>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="booklist">
						<img src="img/img4.jpg" />
						<p>能量场</p>
						<p>苏祺</p>
					</div>
					<div class="booklist">
						<img src="img/img5.jpg" />
						<p>三更雨</p>
						<p>一曲殇歌</p>
					</div>
					<div class="booklist" style="margin-right: 10px;">
						<img src="img/img6.jpg" />
						<p>心智探奇</p>
						<p>史蒂芬·平克</p>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="booklist">
						<img src="img/img7.jpg" />
						<p>我这一辈子</p>
						<p>老舍</p>
					</div>
					<div class="booklist">
						<img src="img/img8.jpg" />
						<p>呼兰河传</p>
						<p>萧红</p>
					</div>
					<div class="booklist" style="margin-right: 10px;">
						<img src="img/img9.jpg" />
						<p>皮囊</p>
						<p>蔡崇达</p>
					</div>
				</div>
			</div>			
			<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
				<span class="swiper-pagination-bullet"></span>
				<span class="swiper-pagination-bullet"></span>
				<span class="swiper-pagination-bullet"></span>
			</div>
		</div>
		<div class="footer">
			<div class="jiaru cartshop">加入购物车</div>
			<div class="goumai cartshop">立即购买</div>
		</div>	
		<div class="carticon" onclick="location.href = 'gouwuche.html';return false;"></div>
		<script>
			var swiper = new Swiper('.swiper-container', {
				spaceBetween: 30,
				centeredSlides: true,
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			});
			$(function(){
				$(".tab>:last-child>*").hide();
				$(".tab>:last-child>:first-child").show();
				$(".demo span").click(function(){
					var index=$(this).index();		 			
		 			//console.log(index);
		 			$(".bottomLine").css("left",index*110+16+"px");
		 			$(".demo span").removeClass();
		 			$(".demo span:nth-of-type("+(index+1)+") ").addClass("tabcolor");
		 			var $now_tab = $(this).parents(".tab");										
	                $now_tab.find(">:last-child>*").hide();
	                $now_tab.find(">:last-child>:nth-of-type("+(index+1)+")").show(); 										
				});		
				
				$(".freeDownload").click(function(){
					$(this).css("background","#f66d00");
					$(this).html("已收藏");
				});								
			});
			
			
			var offset = $('.carticon').offset();  
			console.log(offset);
			$('.jiaru').click(function (event) {
			
		    var thisItem = $(this); 
		    var flyer=$("<div class='d1'><img src='img/pic1.jpg'/></div>") 
		    flyer.fly({  
		        start: {  
		            left: event.pageX,  
		            top: event.pageY  
		        },  
		        end: {  
		            left: offset.left + 10,  
		            top: offset.top + 10,  
		            width: 0,  
		            height: 0  
		        },  
		        onEnd: function () {    
		            $(".jiaru").css("cursor","default").unbind('click');
		            $(".jiaru").text("已加入购物车");
		           /* $(this).destory();*/  
		        }  
		    });  
			});  
			
	    		
		</script>
	</body>
</html>
